<template>
	<view>
		<view class="right_function_box" :class="{ hide: !isShow }">
			<view class="functionArea">
				<view class="area_lis" v-for="(item, index) in functionArea1" :checkMethods="checkMethods" :key="index" :change:checkMethods="renderScript.emitData">
					<view class="area_lis_mask_box" @tap="_methods(item._methods)"></view>
					<view class="areaTop">
						<text :class="[ 'iconfont', item.icon ]"></text>
					</view>
					<view class="areaBottom">{{ item.text }}</view>
				</view>
			</view>
			<view class="functionArea" v-if="isReturn">
				<view class="area_lis" v-for="(item, index) in functionArea2" :key="index" @tap="top">
					<view class="areaTop">
						<text :class="[ 'iconfont', item.icon ]"></text>
					</view>
					<view class="areaBottom">{{ item.text }}</view>
				</view>
			</view>
			<view class="point" @click="isShow = !isShow">
				<text :class="{ rotate: isShow }" class="iconfont icon-a-Frame1082"></text>
			</view>
		</view>

		<!-- 生成海报 -->
		<view class="_mask_box" v-if="!!showMaskUrl">
			<view class="img-box">
				<view class="_img">
					<!-- #ifdef APP-PLUS -->
					<image :src="imgUrl" @longpress="downImg(imgUrl,false)" mode="widthFix"></image>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<image :src="imgUrl" show-menu-by-longpress mode="widthFix"></image>
					<!-- #endif -->
				</view>
				<view class="text">长按图片保存至手机</view>
				<text @click="showMaskUrl = false" class="iconfont icon-a-Frame1074"></text>
			</view>
		</view>
		<poster :isShow="isShowPoster" :isUplode="false" :canvasInfoArr="canvasInfoArr" @posterImg="(obj) => canvasImg(obj)"></poster>
	</view>
</template>

<script module="renderScript" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	data(){
		return{
			now_methods: ''
		}
	},
	methods:{
		// 发送数据到逻辑层
		async emitData(_methods) {
			if(!_methods){
				this.now_methods = '';
				return;
			}
			if(this.now_methods == _methods) return;
			this.now_methods = _methods;
			const dom = document.getElementById('htmlCanvas');
			let screenHeight = uni.getSystemInfoSync().screenHeight;
			let _height = 0;
			if(dom.clientHeight>screenHeight * 1.5){
				_height = screenHeight * 1.5;
			}else{
				_height = dom.clientHeight;
			}
			const canvas = await html2canvas(dom, {
				width: dom.clientWidth, //dom 原始宽度
				height: _height,
				scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
				scrollX: 0,
				dpi:300,
				scale:2,
				useCORS: true,
				backgroundColor: '#F4F5F7',
				timeout: 0
			});

			const base64 = canvas.toDataURL('image/jpg', 1);

			let obj = {
				val: base64,
				_width: dom.clientWidth,
				_height: _height,
			}

			this.$ownerInstance.callMethod('receiveRenderData', obj)
		}
	}
}
</script>
<script>
/**
 * htmlCanvas 截图区域id
 *
 *
 * */
export default {
	name: 'subfunction', // 右侧子功能
	props: {
		scrollTop: { default: 0 }
	},
	watch: {
		scrollTop(curr) {
			if (curr > 600) {
				//当距离大于600时显示回到顶部按钮
				this.isReturn = true;
			} else {
				//当距离小于600时显示回到顶部按钮
				this.isReturn = false;
			}
		}
	},
	data() {
		return {
			isShowPoster: false,
			showMaskUrl: false,
			imgUrl: '',
			canvasInfoArr: [],
			// 功能区一
			functionArea1: [
				{ icon: 'icon-a-Frame1081', text: '咨询' },
				{ icon: 'icon-a-Frame1080', text: '生成截图', _methods: 'screenshot' }
				// { icon: 'icon-a-Frame1079', text: '分享', _methods: 'share' }
			],
			// 功能区二
			functionArea2: [{ icon: 'icon-a-Frame1082', text: 'TOP' }],
			isShow: false,
			isReturn: false,
			qrInfo: {
				link: '',
				url: ''
			},
			checkMethods: ''
		};
	},
	methods: {
		canvasImg(obj) {
			this.imgUrl = obj.url;
			this.showMaskUrl = true;
			uni.hideLoading();
		},
		screenshot(_methods) {
			// #ifdef H5
			this.checkMethods = _methods;
			// #endif
			// #ifdef APP-PLUS
			this.checkMethods = _methods;
			// #endif
			
			// #ifdef MP
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: '暂不支持截图'
			});
			// #endif
		},
		_methods(_methods) {
			let that = this;
			if (!_methods) return;
			that.$emit(_methods);
			if (_methods === 'screenshot') {
				if (that.imgUrl) {
					that.showMaskUrl = true;
					return;
				}
				uni.showLoading({
					title: '截图生成中...',
					mask: true
				});
				that.screenshot(_methods);
			}
		},
		top() {
			this.$emit('_top');
		},
		// 绘制canvas
		async receiveRenderData(obj) {
			let that = this;
			const { val, _width, _height } = obj;
			let wRatio = 1;
			let hRatio = 1;
			let baseWidth = 340; // 基础宽度
			let canvasWidth = uni.getSystemInfoSync().windowWidth * 0.9;
			hRatio = canvasWidth / baseWidth; // 宽度缩放比例
			const canvasBaseHeight = canvasWidth * (_height / _width); // 缩放后的高度
			const _url = await that.base64ToPath(val); // base64 canvas不支持绘制
			// const qrUrl = await that.base64ToPath(that.qrInfo.url); // base64 canvas不支持绘制

			that.canvasInfoArr = [
				{
					type: 'graphical',
					x: 0,
					y: 0,
					isBg: true,
					w: canvasWidth,
					h: canvasBaseHeight + (canvasWidth / 7.5) * hRatio,
					r: 15,
					fillStyle: 'transparent', // 填充色
					strokeStyle: 'transparent', // 画笔颜色
					lineWidth: 0 // 边框宽度
				},
				{
					type: 'img',
					isBase64: true,
					url: require('@/static/imgs/canvas-bg1.png'),
					x: 0,
					y: 0,
					w: canvasWidth + 1,
					h: (canvasWidth / 7.5) * hRatio,
					r: 0
				},
				{
					type: 'img',
					url: _url, // 背景图
					x: 0, // 图片的x坐标
					y: (canvasWidth / 7.5) * hRatio, // 图片的y坐标
					w: canvasWidth, // 图片宽度
					h: canvasBaseHeight, // 图片高度
					r: 0 // 图片圆角
				},
				{
					type: 'graphical',
					x: 0,
					y: (canvasWidth / 7.5) * hRatio + canvasBaseHeight - 200 * hRatio,
					w: canvasWidth,
					h: 200 * hRatio,
					r: 0,
					linearInfo: {
						addColor: [
							{ val: 0, color: 'rgba(255,255,255,.2)' },
							{ val: 1, color: 'rgba(255,255,255,.98)' }
						]
					},
					strokeStyle: 'transparent', // 画笔颜色
					lineWidth: 0 // 边框宽度
				},
				{
					type: 'img',
					isBase64: true,
					url: require('@/static/imgs/canvas-text.png'),
					x: 60,
					y: (canvasWidth / 7.5) * hRatio + canvasBaseHeight - 200 * hRatio + 40 * hRatio,
					w: canvasWidth - 60 * 2,
					h: (canvasWidth - 60 * 2) * (158 / 758),
					r: 0
				},
				{
					type: 'img',
					isBase64: true,
					url: require('@/static/imgs/bg.png'),
					x: canvasWidth / 2 - 80 / 2,
					y: (canvasWidth / 7.5) * hRatio + canvasBaseHeight - 200 * hRatio + 40 * hRatio + (canvasWidth - 60 * 2) * (158 / 758) + 10 * hRatio,
					w: 80,
					h: 80,
					r: 10
				}
			];
			setTimeout(() => {
				that.isShowPoster = true;
				that.checkMethods = '';
			}, 100);
		},
		shareImg(url, change) {
			if (!url) return;
			uni.showLoading({
				title: '图片生成中',
				mask: true
			});
			// if (getApp().globalData.isShowPoster) return;
			// getApp().globalData.isShowPoster = true;
			uni.saveFile({
				tempFilePath: url,
				responseType: 'arraybuffer',
				success() {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '保存成功'
					});
				}
			});
		}
	},
	mounted() {
		// this.canvasQrUrl();
	}
};
</script>


<style lang="scss" scoped>
.right_function_box {
	position: fixed;
	right: 36rpx;
	top: 34vh;
	background-color: transparent;
	display: inline-block;
	width: max-content;
	height: max-content;
	z-index: 9;
	transition: 0.4s ease;
	.functionArea {
		border-radius: 10rpx;
		background-color: rgba(39, 46, 52, 0.7);
		margin-bottom: 8rpx;
		.area_lis {
			min-width: 96rpx;
			min-height: 96rpx;
			border-bottom: 2rpx solid rgba(39, 46, 52, 0.4);
			font-size: 22rpx;
			color: #ffffff;
			padding: 18rpx 8rpx 12rpx;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			.areaTop {
				display: inline-block;
				height: max-content;
				.iconfont {
					font-size: 32rpx;
					color: rgba(255, 255, 255, 0.9);
				}
			}
		}
		.area_lis:last-child {
			border-bottom-width: 0;
		}
	}
}
.hide {
	right: 0;
	transform: translate(100%, 0);
}
.point {
	// background-color: rgba(39, 46, 52, 0.7);
	padding: 40rpx 20rpx;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-120%, -50%);
	border-radius: 10rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	.iconfont {
		transform: rotate(-90deg);
		color: rgba(39, 46, 52, 0.7);
		transition: 0.4s ease;
	}
	.iconfont.rotate {
		// transform: translate(-90%, -50%) rotate(90deg);
	}
}

// 分享海报
._mask_box {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	.img-box {
		text-align: center;
		width: 100%;
		height: 80vh;
		flex-wrap: wrap;
		position: relative;

		._img {
			margin-top: -4vh;
			display: inline-block;
			width: 80%;
			max-height: 80vh;
			height: 80vh;
			overflow-y: auto;
			border-radius: 30rpx;
			// border: 8rpx solid #ffffff;
			margin: 0 auto;
			image {
				width: 100%;
				vertical-align: middle;
				border-radius: 30rpx;
			}
		}
		
		.iconfont {
			position: absolute;
			right: 0;
			top: 0;
			color: #ffffff;
			font-size: 30rpx;
			border-radius: 50%;
			// border: 4rpx solid #ffffff;
			z-index: 1;
			transform: translate(-100%,-50%)
		}

		.text {
			width: 100%;
			margin-top: 20rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}
}
.area_lis_mask_box{
	position: absolute;
	z-index: 55;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: transparent;
}
</style>
